<script>
export default {
  name: 'SxFilterSearchFilterItem',
  functional: true,
  props: {
    label: String,
    size: String,
    hideLabel: Boolean
  },
  render(h, { props, slots }) {
    const { label, hideLabel , size } = props

    return (
      <div class={`SxFilterSearchFilterItem el-input--${size} el-input--${size}`}>
        {!hideLabel && (
          <div class="SxFilterSearchFilterItem__label">{label}</div>
        )}
        <div class="SxFilterSearchFilterItem__content" >{slots().default}</div>
      </div>
    )
  }
}
</script>

<style scoped lang="scss">
.SxFilterSearchFilterItem {
  display: flex;
  position: relative;
  margin-right: 20px;
  margin-top: 5px;

  &__label {
    color: #555;
    min-width: 78px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
</style>
